<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="platformRules" :model="platformForm" label-position="left" label-width="140px">
      <el-form-item label="编码" prop="code">
        <el-input v-model="platformForm.code" />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="platformForm.title" />
      </el-form-item>
      
      <el-form-item label="模板">
        <el-row :gutter="20">
          <el-col :span="6">          
          <el-select v-model="platformForm.theme" class="filter-item" placeholder="选择平台">
              <el-option v-for="item in themeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          </el-col>
          <el-col :span="14">   
            <el-select v-model="platformForm.primaltplname" class="filter-item" placeholder="选择文件">
              <el-option v-for="item in primaltplnameList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="platformForm.content" :autosize="{ minRows: 4, maxRows: 8}" type="textarea"  />
      </el-form-item>
        <el-form-item label="类型" prop="platformType">
            <el-select v-model="platformForm.platformType" placeholder="请选择">
              <el-option label="全部" value="0">全部</el-option>
              <el-option label="PC-WEB" value="1">PC-WEB</el-option>
              <el-option label="H5-WEB" value="2">H5-WEB</el-option>
              <el-option label="PC-H5-WEB" value="3">PC-H5-WEB</el-option>
              <el-option label="H5-WEB" value="4">H5-WEB</el-option>
              <el-option label="IOS-APP" value="5">IOS-APP</el-option>
              <el-option label="DROID-APP" value="6">DROID-APP</el-option>
              <el-option label="微信小程序" value="7">微信小程序</el-option>
            </el-select>
        </el-form-item>
      <el-form-item label="SEO标题" prop="seoTitle">
        <el-input v-model="platformForm.seoTitle" />
      </el-form-item>
      <el-form-item label="SEO关键字" prop="seoKeyword">
        <el-input v-model="platformForm.seoKeyword" />
      </el-form-item>
      <el-form-item label="SEO描述" prop="seoDescrption">
        <el-input v-model="platformForm.seoDescrption" />
      </el-form-item>
      <el-form-item label="静态化" prop="alloweStatic">
        <el-radio-group v-model="platformForm.alloweStatic">
          <el-radio :label="2">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="platformForm.alloweStatic == 2" label="静态存放方式" prop="remote">
        <el-radio-group v-model="diskForm.remote">
          <el-radio :label="2">本地</el-radio>
          <el-radio :label="1">远程</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="diskForm.remote == 2" label="本地目录" prop="folder">
        <el-input v-model="diskForm.folder" />
      </el-form-item>
      <el-form-item v-if="diskForm.remote == 1" label="主机类型" prop="host">
        <el-radio-group v-model="diskForm.drive">
          <el-radio label="aliyun">阿里云</el-radio>
          <el-radio label="tecentcloud">腾讯云</el-radio>
          <el-radio label="ftp">FTP</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="diskForm.drive == 'ftp'" label="FTP主机" prop="host">
        <el-input placeholder="主机" v-model="diskForm.host" />
        <el-input placeholder="端口" v-model="diskForm.port" />
      </el-form-item>
      <el-form-item v-if="diskForm.drive == 'ftp'" label="FTP账户" prop="host">
        <el-input placeholder="用户名" v-model="diskForm.username" />
        <el-input placeholder="密码" v-model="diskForm.password" />
      </el-form-item>
      <el-form-item v-if="diskForm.drive == 'ftp'" label="FTP目录" prop="folder">
        <el-input placeholder="FTP目录" v-model="diskForm.folder" />
      </el-form-item>
      <el-form-item v-if="diskForm.drive == 'ftp'" label="FTP传输模式" prop="mode">
        <el-radio-group v-model="diskForm.mode">
          <el-radio :label="2">主动</el-radio>
          <el-radio :label="1">被动</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="diskForm.drive == 'tecentcloud'" label="地域" prop="folder">
        <el-input placeholder="地域" v-model="diskForm.region" />
      </el-form-item>
      <el-form-item v-if="diskForm.drive == 'tecentcloud'" label="存储桶名称" prop="host">
        <el-input placeholder="存储桶名称" v-model="diskForm.bucket" />
      </el-form-item>
      <el-form-item v-if="diskForm.drive == 'tecentcloud'" label="账户信息" prop="host">
        <el-input placeholder="appKey" v-model="diskForm.appKey" />
        <el-input placeholder="appSecret" v-model="diskForm.appSecret" />
      </el-form-item>
      <el-form-item label="图标">
        <Upload v-model="platformForm.logo" />
      </el-form-item>
      <el-form-item label="域名">
          <el-select v-model="platformForm.domainID" class="filter-item" placeholder="选择域名">
            <el-option v-for="item in domainOptions" :key="item.ID" :label="item.title" :value="item.ID" />
          </el-select>
      </el-form-item>
      <el-form-item label="权限">
            <el-select v-model="platformForm.permission" placeholder="请选择">
              <el-option value="0">公开</el-option>
              <el-option value="1">私有</el-option>
              <el-option value="2">指定用户</el-option>
            </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="platformForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="createData()">
        确认
      </el-button>
      <el-button v-if="platformForm.status.value === 5" type="danger" @click="handleDelete(platformForm)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import { savePlatform, removePlatformByID, getPlatformDetail } from '@/api/pagination/platform'
import { getDomainUsableList } from '@/api/pagination/domain'
import {  getTemplateUsableList } from '@/api/pagination/template'
import waves from '@/directive/waves' // waves directive
import { } from '@/utils'
import Upload from '@/components/Upload/SingleImage2' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Upload },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      filterForm: {
        start: 1,
        perplatform: 20,
        keyword: undefined,
        sort: '+id'
      },
      domainOptions:[],
      themeList:[],
      primaltplnameList:[],
      diskForm:{
        remote:'ftp'
      },
      platformForm: {
        code: '',
        title: '',
        logo: '',
        remark: '',
        content: '',
        status: { label: '', value: 1 }
      },
      platformRules: []
    }
  },
  created() {
    this.loadDomainList()
    this.loadThemeList()
    let platformID = this.$route.query && this.$route.query.platformID
    if (platformID !== undefined) {
      platformID = parseInt(platformID)
      if (!isNaN(platformID)) {
        this.listLoading = true
        const formData = {
          'platformID': platformID
        }
        getPlatformDetail(formData).then(response => {
          if (response.status === 200) {
            this.platformForm = response.data
            this.diskForm = response.data.staticRules
            this.diskForm = JSON.parse(this.diskForm)
            if(this.diskForm == null){
              this.diskForm = {
                "remote":2
              }
            }
            console.log('优化',this.diskForm)
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
  },
  watch: {
    'platformForm.theme':function(newVal){
      this.primaltplnameList = [];
      this.loadTemplateList(newVal)
    }
  },
  methods: {
    handleCannel() {
      this.$router.push({ path: 'platform' })
    },
    loadDomainList() {
      getDomainUsableList().then(response => {
        if(response.status === 200){
          this.domainOptions = response.data.list
        }
      })
    },
    loadThemeList() {
      getTemplateUsableList().then(response => {
        if(response.status === 200){
          this.themeList = response.data.list
        }
      })
    },
    loadTemplateList(theme) {
      getTemplateUsableList({
        "themeName":theme
      }).then(response => {
        if(response.status === 200){
          this.primaltplnameList = response.data.list
        }
      })
    },
    createData() {
      this.listLoading = true

      const _platformForm = this.platformForm
      try {
        _platformForm.status = _platformForm.status.value
      } catch (error) {
        _platformForm.status = 6
      }
      if (_platformForm.ID > 0) {
        _platformForm.platformID = _platformForm.ID
      }
      _platformForm.staticRules = JSON.stringify(this.diskForm)
      savePlatform(_platformForm).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'platform' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, index) {
      this.$confirm('确实要执行此操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        const formData = {
          'platformID': row.ID
        }
        removePlatformByID(formData).then(response => {
          if (response.status === 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
            this.$router.push({ path: 'group' })
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
